﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DnDFileUpload.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Drag n' Drop File Upload</title>
    <link href="/Style.css" rel="Stylesheet" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>

    <script type="text/javascript">
        var dropZone;

        // Initializes the dropZone
        $(document).ready(function () {
            dropZone = $('#dropZone');
            dropZone.removeClass('error');

            // Check if window.FileReader exists to make 
            // sure the browser supports file uploads
            if (typeof(window.FileReader) == 'undefined') {
                dropZone.text('Browser Not Supported!');
                dropZone.addClass('error');
                return;
            }

            // Add a nice drag effect
            dropZone[0].ondragover = function () {
                dropZone.addClass('hover');
                return false;
            };

            // Remove the drag effect when stopping our drag
            dropZone[0].ondragend = function () {
                dropZone.removeClass('hover');
                return false;
            };

            // The drop event handles the file sending
            dropZone[0].ondrop = function(event) {
                // Stop the browser from opening the file in the window
                event.preventDefault();
                dropZone.removeClass('hover');

                // Get the file and the file reader
                var file = event.dataTransfer.files[0];

                // Validate file size
                if(file.size > <%=maxRequestLength%>) {
                    dropZone.text('File Too Large!');
                    dropZone.addClass('error');
                    return false;
                }

                // Send the file
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener('progress', uploadProgress, false);
                xhr.onreadystatechange = stateChange;
                xhr.open('POST', '/Default.aspx', true);
                xhr.setRequestHeader('X-FILE-NAME', file.name);
                xhr.send(file);
            };
        });

        // Show the upload progress
        function uploadProgress(event) {
            var percent = parseInt(event.loaded / event.total * 100);
            $('#dropZone').text('Uploading: ' + percent + '%');
        }

        // Show upload complete or upload failed depending on result
        function stateChange(event) {
            if (event.target.readyState == 4) {
                if (event.target.status == 200 || event.target.status == 304) {
                    $('#dropZone').text('Upload Complete!');
                }
                else {
                    dropZone.text('Upload Failed!');
                    dropZone.addClass('error');
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
   <div id="dropZone">
        Drop File Here to Upload.
    </div>
    </form>
</body>
</html>
